<template>
  <div>
    <div>列表页</div>
    <div>{{num}}</div>
    <button @click="num+=1">改变状态</button>
  </div>
</template>
<script>
// keep-alive 例子
export default {
  data() {
    return {
      num: 0
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 this，因为当钩子执行前，组件实例还没被创建
    console.log('beforeRouteEnter')
    console.log(to)
    console.log(from)
    var init
    if (from.path === '/keepalivechild') { // 如果是从详情页过来的, 就不用初始化
      console.log('从详情页过来的')
      to.meta.init = false // 不用初始化, 状态写在路由信息里
      init = false // 不用初始化, 状态传给 init方法
    } else {
      console.log('不是从详情页过来的')
      to.meta.init = true // 初始化
      init = true // 初始化
    }
    console.log(this) // undefined
    // next() // 必须调用next 才能进入这个页面
    next(vm => vm.init(init)) // next中可以写一个函数, 这个函数接收一个vm对象
    // vm是本组件的vue实例
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。
    // 而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 this
    console.log('beforeRouteUpdate')
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 this
    console.log('beforeRouteLeave')
    console.log(to)
    console.log(from)
    next() // 必须 调用next 才能 跳出这个页面
  },
  created() {
    console.log('created')
    console.log(this)
  },
  mounted() {
    console.log('mounted')
    console.log(this)
  },
  activated() {
    console.log('activated')
    console.log(this)
    // if (this.$route.meta.init) {
    //   // 需要初始化
    //   console.log('初始化数据')
    //   this.num = 0
    // } else {
    //   console.log('不用初始化数据')
    // }
  },
  deactivated() {
    console.log('deactivated')
    console.log(this)
  },
  methods: {
    init(init) {
      if (init) {
        console.log('初始化')
      } else {
        console.log('不初始化')
      }
    }
  }
}
</script>
